<template>
  <div class="order-details">
    <!-- 头部导航 -->
    <div class="header">
      <div class="left" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="title">订单明细</div>
      <div class="right"></div>
    </div>

    <!-- Tab切换 -->
    <div class="tab-wrapper">
      <div class="tab-list">
        <div v-for="tab in tabs"
             :key="tab.type"
             :class="['tab-item', { active: currentTab === tab.type }]"
             @click="handleTabClick(tab.type)">
          {{ tab.name }}
        </div>
      </div>
    </div>

    <!-- 月份选择 -->
    <div class="month-picker">
      <el-date-picker
        v-model="selectedDate"
        type="month"
        format="yyyy年MM月"
        value-format="yyyy-MM"
        placeholder="选择月份"
        :picker-options="pickerOptions"
        @change="handleMonthChange">
      </el-date-picker>
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
      <div v-for="(order, index) in orderList"
           :key="index"
           class="order-item"
           @click="goToParticulars(order)">
        <!-- 订单时间和状态 -->
        <div class="order-header">
          <span class="time">{{ order.orderTime }}</span>
          <span :class="['status', order.status]">{{ order.statusText }}</span>
        </div>
        <!-- 患者信息 -->
        <div class="patient-info">
          <span class="name">{{ order.patientName }}</span>
          <span class="gender">{{ order.gender }}</span>
          <span class="age">{{ order.age }}岁</span>
        </div>
        <!-- 订单金额和类型 -->
        <div class="order-footer">
          <span class="amount">¥{{ formatMoney(order.amount) }}</span>
          <span :class="['type', getTypeClass(order.type)]">{{ order.type }}</span>
        </div>
      </div>

      <!-- 无数据提示 -->
      <div v-if="orderList.length === 0" class="empty-tip">
        暂无订单数据
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderList2 } from '@/api/myincome/myincome'
import dayjs from 'dayjs'

export default {
  data() {
    return {
      tabs: [
        { type: 'all', name: '全部' },
        { type: 'image', name: '图文问诊' },
        { type: 'quick', name: '极速问诊' },
        { type: 'prescription', name: '开药问诊' },
        { type: 'private', name: '私人医生' }
      ],
      currentTab: 'all',
      selectedDate: dayjs().format('YYYY-MM'), // 默认当前月份
      orderList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  created() {
    this.getOrders()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleTabClick(type) {
      this.currentTab = type
      this.getOrders()
    },
    handleMonthChange(date) {
      this.getOrders()
    },
    formatMoney(value) {
      const num = parseFloat(value || 0)
      return num.toFixed(2)
    },
    getTypeClass(type) {
      const typeMap = {
        '图文问诊': 'image',
        '极速问诊': 'quick',
        '开药问诊': 'prescription',
        '私人医生': 'private'
      }
      return typeMap[type] || ''
    },
    goToParticulars(order) {
      this.$router.push({
        path: '/myincome/particulars',
        query: { orderId: order.orderId }
      })
    },
    async getOrders() {
      try {
        const res = await getOrderList2()
        this.orderList = res || []
      } catch (error) {
        console.error('获取订单列表失败:', error)
        this.orderList = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-details {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background: #fff;
  border-bottom: 1px solid #eee;

  .title {
    font-size: 17px;
    font-weight: 500;
  }

  .left {
    cursor: pointer;
  }
}

.tab-wrapper {
  background: #fff;
  border-bottom: 1px solid #eee;

  .tab-list {
    display: flex;
    padding: 0 15px;
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none;
    }

    .tab-item {
      padding: 12px 15px;
      font-size: 14px;
      color: #666;
      white-space: nowrap;
      cursor: pointer;

      &.active {
        color: #409EFF;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 15px;
          right: 15px;
          height: 2px;
          background: #409EFF;
        }
      }
    }
  }
}

.month-picker {
  padding: 10px 15px;
  background: #fff;
  margin-bottom: 10px;

  >>> .el-input__inner  {
    border-radius: 4px;
  }
}

.order-list {
  padding: 0 15px;

  .order-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;

    &:active {
      opacity: 0.8;
    }

    .order-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .time {
        color: #999;
        font-size: 14px;
      }

      .status {
        font-size: 14px;
        &.completed { color: #67C23A; }
        &.closed { color: #909399; }
      }
    }

    .patient-info {
      margin-bottom: 10px;
      font-size: 15px;

      .gender, .age {
        margin-left: 10px;
        color: #666;
      }
    }

    .order-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .amount {
        color: #FF4949;
        font-size: 16px;
        font-weight: 500;
      }

      .type {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;

        &.image {
          color: #409EFF;
          background: #ECF5FF;
        }
        &.quick {
          color: #E6A23C;
          background: #FDF6EC;
        }
        &.prescription {
          color: #67C23A;
          background: #F0F9EB;
        }
        &.private {
          color: #909399;
          background: #F4F4F5;
        }
      }
    }
  }
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 30px 0;
}
</style>
